<template>

  <div style="padding: 20px">
    <a-radio-group type="button" :default-value="typeList[0].sql" @change="query" style="margin-bottom: 10px">
      <a-radio v-for="item in typeList" :value="item.sql">{{ item.name }}</a-radio>
    </a-radio-group>

    <a-table :columns="columns" :data="data" column-resizable :bordered="{cell:true}"
             :scroll="{x: '100%',y: '100%'}" :scrollbar="true" :pagination="false"
             :size="'small'"></a-table>
  </div>


</template>

<script setup lang="ts">

import {onMounted, reactive} from 'vue';
import {doQuery} from "../../scripts/mapper";
import {QueryResult} from "../../scripts/type";
import {Message} from "@arco-design/web-vue";

const columns: any[] = reactive([])
const data: any[] = reactive([])

const typeList = [
  {
    name: '集群信息',
    sql: 'SHOW CLUSTER;'
  },
  {
    name: '集群状态',
    sql: 'SHOW CLUSTER ALIVE;'
  },
  {
    name: '连接信息',
    sql: 'SHOW CONNECTIONS;'
  },
  {
    name: '数据节点(DNODE)',
    sql: 'SHOW DNODES;'
  },
  {
    name: '管理节点(MNODE)',
    sql: 'SHOW MNODES;'
  },
  {
    name: '查询节点(QNODE)',
    sql: 'SHOW QNODES;'
  },
]

onMounted(() => {
  query(typeList[0].sql)
})

const query = (sql) => {
  doQuery(sql).then((queryResult: QueryResult) => {
    if (queryResult.success && queryResult.data) {
      columns.splice(0, columns.length);
      data.splice(0, data.length);
      queryResult.meta?.forEach((metaItem) => {
        columns.push({
          title: metaItem.columnName,
          dataIndex: metaItem.columnName,
          width: 120
        })
      })
      queryResult.data?.forEach((dataItem: any) => {
        let dataObj = {};
        queryResult.meta?.forEach((metaItem, index) => {
          dataObj[metaItem.columnName!] = dataItem[index]
        })
        data.push(dataObj)
      })
    } else {
      Message.error("数据获取失败" + (queryResult.message ? (": " + queryResult.message) : ""))
    }
  })
};


</script>
